<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>j1007_4_css()</title>
		<style>
			.c1{font-family:"French Script MT"}
		</style>
		<script src="js/jquery-2.1.1.js"></script>

		<script src="js/jquery-2.1.1.min.js"></script>
	<script>
		$(document).ready(function(){
			
			//속성검사
			$('#btn01').click(function(){
				alert($('h1').css('font-family'));
			});
			
			//속성변경1
			$('#btn02').click(function(){
				$('h1').attr('font-size','5.5em');
			});
			
			//속성변경2
			$('#btn03').click(function(){
				var colors=['orange','red','pink'];
				
				$('h3').css(
					'color',function(index){
					return colors[index];
				})
			});
			
			//속성변경3
			$('#btn04').click(function(){
				var colors=['orange','red','pink'];
				
				$('h3').css({'color':function(index){
					return colors[index];
				},'background-color':"black"
				,'font-size':function(index){
					return ((index+1)*100)+"%";
				}
				});
			});
			
		});//end of $(document).ready()
	</script>
	</head>

	<body>
		<button id="btn01">속성검사</button>
		<button id="btn02">속성변경1</button>
		<button id="btn03">속성변경2</button>
		<button id="btn04">속성변경3</button>

		<br/>
		<h1 class="c1">header</h1>
		<h3>heading-0</h3>
		<h3>heading-1</h3>
		<h3>heading-2</h3>
	</body>
</html>
